<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定底栏</title>
    <style>
        /*必须同时设置才能占满屏*/
        html, body {
            height: 100%;
        }

        body {
            display: flex;
            flex-direction: column;
        }

        header {
            flex: 0 0 200px;
            background-color: red;
        }

        section {
            /*元素撑开，footer永远处于底部了*/
            flex: 1;
            background-color: green;
        }

        footer {
            flex: 0 0 200px;
            background-color: blue;
        }



    </style>
</head>
<body>
<header>虎头</header>
<section>猪肚</section>
<footer>蛇尾</footer>
</body>
</html>